<template>
  <div id="app">
    <router-view></router-view>
     <Tabbar v-show="this.$route.meta.isShowTabbar" :tabItems="tabItems"/>
  </div>
</template>
<script>
import Tabbar from "./components/tabbar/Tabbar"
export default {
   components:{
    Tabbar
  },
  data(){
    return{
      tabItems:[
        {
          icon:require("./assets/tabbar/home.png"),
          icon_active:require("./assets/tabbar/home_active.png"),
          title:"首页",
          path:"/"
        },
        {
          icon:require("./assets/tabbar/classify.png"),
          icon_active:require("./assets/tabbar/classify_active.png"),
          title:"分类",
          path:"/about"
        },
        {
          icon:require("./assets/tabbar/cart.png"),
          icon_active:require("./assets/tabbar/cart_active.png"),
          title:"购物车",
          path:"/cart"
        },
        {
          icon:require("./assets/tabbar/mine.png"),
          icon_active:require("./assets/tabbar/mine_active.png"),
          title:"个人",
          path:"/user"
        }
      ]
    }
  }
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  font-size: 0.3rem;
}
body,html,p,ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  font-size: 0.3rem;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
